<template>
  <div class="app-container">
    <img class="login-thumbnail" src="@/assets/login-thumbnail.png" />
    <div class="login-window">
      <div class="login-title">{{ timeLabel }}好，欢迎登录！</div>
      <BaseForm
        class="login-form-area"
        ref="BaseForm"
        :formItemConfigGroup="formItemConfigGroup"
        labelPosition="top"
      />
      <el-checkbox v-model="isRememberPassword" label="记住密码"></el-checkbox>
      <el-button class="login-button" type="primary" @click="login">登录</el-button>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import BaseForm from "@/components/base-form.vue";
import {
  BaseFormComponent,
  FormItemConfigGroup,
  FormType,
} from "@/component-interface";
import userApi from "@/api/user.api";
import { ElMessage } from "element-plus";
import Cookies from "js-cookie";
import store from "@/store";
export default defineComponent({
  name: "Login",
  components: { BaseForm },
  data() {
    return {
      formItemConfigGroup: [
        {
          label: "用户名",
          prop: "username",
          type: FormType.ElInput,
        },
        {
          label: "密码",
          prop: "password",
          type: FormType.ElInput,
        },
      ] as FormItemConfigGroup,
      isRememberPassword: localStorage.getItem('password') ? true : false,
      timeLabel: ""
    };
  },
  methods: {
    login() {
      const data = (this.$refs.BaseForm as BaseFormComponent).getFormData();
      if (this.isRememberPassword) {
        localStorage.setItem('username', data.username)
        localStorage.setItem('password', data.password)
      } else {
        localStorage.removeItem('username')
        localStorage.removeItem('password')
      }
      userApi
        .login(data)
        .then((res) => {
          const { code, msg, content } = res.data;
          store.dispatch("setUser", content);
          Cookies.set("token", content.access_token);
          ElMessage({
            message: msg,
            type: code === 0 ? "success" : "error",
          });
          if (code === 0) {
            this.$router.push("/layout/userManage");
          }
        });
    },
    getTimeLabel() {
      const hour = new Date().getHours();
      if (hour < 6) { this.timeLabel = "凌晨" }
      else if (hour < 9) { this.timeLabel = "早上" }
      else if (hour < 12) { this.timeLabel = "上午" }
      else if (hour < 14) { this.timeLabel = "中午" }
      else if (hour < 17) { this.timeLabel = "下午" }
      else if (hour < 19) { this.timeLabel = "傍晚" }
      else if (hour < 22) { this.timeLabel = "晚上" }
      else { this.timeLabel = "夜里" }
    }
  },
  mounted() {
    this.getTimeLabel()
    if (this.isRememberPassword) {
      (this.$refs.BaseForm as BaseFormComponent).setFormData({
        username: localStorage.getItem('username'),
        password: localStorage.getItem('password')
      })
    }
  }
});
</script>
<style lang="scss" scoped>
.app-container {
  background: #fafafa;
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .login-thumbnail {
    width: 700px;
    height: 600px;
    background: #fafafa;
    margin-right: 50px;
  }
  .login-window {
    width: 472px;
    height: 426px;
    padding: 40px;
    box-sizing: border-box;
    background: #ffffff;
    box-shadow: 0px 20px 60px 0px rgba(30, 34, 45, 0.1);
    border-radius: 2px;
    .login-title {
      width: 392px;
      height: 32px;
      font-size: 24px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #1b1b1b;
      line-height: 32px;
    }
    .login-logo {
      width: 300px;
      height: 300px;
      border-radius: 100%;
    }
    .login-form-area {
      margin-top: 30px;
      ::v-deep .el-form-item {
        margin-bottom: 0;
      }
      ::v-deep .el-form--label-top .el-form-item__label {
        padding: 0;
      }
    }
    .login-button {
      width: 100%;
      margin-top: 24px;
    }
  }
}
</style>